import { createRouter, createWebHistory } from "vue-router";

// import Home from "../pages/home/Index.vue";
// import City from "../pages/city/Index.vue";
// import Search from "../pages/search/Index.vue";
// import Detail from "../pages/detail/Index.vue";
// import Login from "../pages/login/Index.vue";

// import Movies from "../pages/home/movies/Index.vue";
// import Videos from "../pages/home/videos/Index.vue";
// import Show from "../pages/home/show/Index.vue";
// import Mine from "../pages/home/mine/Index.vue";

// import Hot from "../pages/home/movies/hot/Index.vue";
// import Cinema from "../pages/home/movies/cinema/Index.vue";
// import Wait from "../pages/home/movies/wait/Index.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      component: () => import("../pages/home/Index.vue"),
      children: [
        {
          path: "/home",
          redirect: "/home/movies",
        },
        {
          path: "/home/movies",
          component: () => import("../pages/home/movies/Index.vue"),
          children: [
            {
              path: "/home/movies",
              redirect: "/home/movies/hot",
            },
            {
              path: "/home/movies/hot",
              component: () => import("../pages/home/movies/hot/Index.vue"),
            },
            {
              path: "/home/movies/cinema",
              component: () => import("../pages/home/movies/cinema/Index.vue"),
            },
            {
              path: "/home/movies/wait",
              component: () => import("../pages/home/movies/wait/Index.vue"),
            },
          ],
        },
        {
          path: "/home/videos",
          component: () => import("../pages/home/videos/Index.vue"),
        },
        {
          path: "/home/show",
          component: () => import("../pages/home/show/Index.vue"),
          meta: {
            requireLogin: true,
            title: "猫眼演出",
          },
        },
        {
          path: "/home/mine",
          component: () => import("../pages/home/mine/Index.vue"),
          meta: {
            requireLogin: true,
            title: "我的猫眼",
          },
          // beforeEnter表示的是路由独享守卫(守卫这一个路由)
          // 用法和全局前置守卫完全一样
          // beforeEnter: (to, from, next) => {
          //   next();
          // },
        },
      ],
    },
    {
      path: "/city",
      // component: City,
      component: () => import("../pages/city/Index.vue"),
    },
    {
      path: "/search",
      component: () => import("../pages/search/Index.vue"),
    },
    {
      path: "/detail/:id",
      component: () => import("../pages/detail/Index.vue"),
    },
    {
      path: "/login",
      component: () => import("../pages/login/Index.vue"),
      // 路由元信息
      // meta可以写任意想写的字段
      // meta: {},
    },
  ],
  // 去新页面的时候，从最顶上开始
  // 返回旧页面的时候，可以保留原来的位置
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

// 全局前置守卫
// 每当页面进行改变或者跳转的时候，这个全局前置守卫里面的函数都会执行
// 需要去return true或者false。来判断是否应该跳转
// 或者使用第三个参数next函数来判断是否应该跳转
router.beforeEach((to, from, next) => {
  // to表示要去的那个页面的路由信息
  // console.log(to);
  // from表示离开的那个页面的路由信息
  // console.log(from);
  // next();

  // console.log(to.meta.requireLogin);

  // document.title = to.meta.title || "猫眼电影 - 娱乐看猫眼";

  // 路由鉴权
  // if (to.path === "/home/mine") {
  if (to.meta.requireLogin) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      // next(false);
      next("/login");
    }
  } else {
    next();
  }
});

// 全局解析守卫
// 全局解析守卫从语法和功能上来说，几乎和全局前置守卫完全一样
// 调用的时机会比全局解析守卫迟，是在文件被加载以后调用
// 用到的机会就比较少了
// router.beforeResolve((to, from, next) => {});

// 全局后置钩子
// 是在页面已经跳转完成以后调用
// 没有第三个参数next
// router.afterEach((to, from) => {
//   document.title = to.meta.title || "猫眼电影 - 娱乐看猫眼";
// });

export default router;
